<template>
  <div class="commonTableSty">
    <a-table
      :columns="columns"
      :rowKey="(record, index) => index"
      :dataSource="newTaskData.climbControlList"
      :pagination="false"
    >
      <template
        slot="hierarchy"
        slot-scope="text, record,index"
      >
        <span>{{ $t(`阶段${index+1}`) }}</span>
      </template>
      <!-- 推送车辆台数 -->
      <template
        slot="numberUnit"
        slot-scope="text, record"
      >
        <a-input v-model="record.carNum"></a-input>
      </template>
      <!-- 进阶条件配置 -->
      <template
        slot="conditionConfig"
        slot-scope="text, record"
      >
        <a-select
          v-model="record.condition"
          showSearch
          allow-clear
          placeholder
          optionFilterProp="children"
          :filterOption="$commonFun.filterOption"
          style="width:160px"
        >
          <a-select-option
            :key="1"
            :value="1"
            title="阶段持续天数"
          >
            阶段持续天数
          </a-select-option>
          <a-select-option
            :key="2"
            :value="2"
            title="升级完成率"
          >
            升级完成率
          </a-select-option>
        </a-select>
        <a-input style="width:160px;marginLeft:10px" v-model="record.conditionValue">
          <template #addonAfter>
            <span v-if="record.condition===1">{{ $t('day') }}</span>
            <span v-else>%</span>
          </template>
        </a-input>
      </template>
      <!-- 进阶说明 -->
      <template
        slot="explain"
        slot-scope="text, record"
      >
        当前阶段持续 {{ record.conditionValue||'-' }}{{ record.condition===1?$t('day'):'%' }}，降进入下一阶段
      </template>
    </a-table>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
const climbControlList = [
  { carNum: 1, condition: 1, conditionValue: 2 },
  { carNum: 30, condition: 1, conditionValue: 5 },
  { carNum: 9, condition: 2, conditionValue: 30 },
  { carNum: 5, condition: 2, conditionValue: 60 }
]
export default {
  name: 'NewTaskClimbControl',
  components: {
    TableEllipsis
  },
  props: {
    upgradeTriggerType: {
      type: String,
      default: ''
    }
  },
  computed: {
    ...mapState({
      newTaskDataAll: (state) => state.newTask.newTaskData
    }),
    newTaskData(){
      return this.newTaskDataAll[this.upgradeTriggerType];
    },
    columns () {
      // 表头
      const columns = [
        {
          title: this.$t('stage'),
          width: 100,
          scopedSlots: { customRender: 'hierarchy' }
        },
        {
          title: this.$t('tscls'),
          width: 180,
          scopedSlots: { customRender: 'numberUnit' }
        },
        {
          title: '进阶条件配置',
          scopedSlots: { customRender: 'conditionConfig' }
        },
        {
          title: this.$t('jjsm'),
          scopedSlots: { customRender: 'explain' }
        }
      ]
      return columns
    }
  },
  created () {

  },
  mounted () {
    //   有缓存时使用缓存
    if (!this.newTaskData.climbControlList.length) {
      this.newTaskData.climbControlList = climbControlList
    }
  },
  methods: {

  }
}
</script>
